<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 头部操作栏 -->
            <div class="layui-form lay-header">
                <div class="toolbar">
                    <div class="layui-form-item lay-query-content">
                        <div class="lay-query-box">
                            <div class="query-lt">
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">计划编号：</label>
                                    <div class="layui-input-inline">
                                        <input name="code" class="layui-input" type="text" placeholder="工单编号"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">物料名称：</label>
                                    <div class="layui-input-inline">
                                        <input name="skuName" class="layui-input" type="text" placeholder="物料名称"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">物料编码：</label>
                                    <div class="layui-input-inline">
                                        <input name="skuCode" class="layui-input" type="text" placeholder="物料名称"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">工单状态：</label>
                                    <div class="layui-input-inline">
                                        <select name="status">
                                            <option value="">工单状态</option>
                                            <option value="toactivate">待激活</option>
                                            <option value="inproduction">生产中</option>
                                            <option value="accomplish">完成</option>
                                            <option value="termination">终止完成</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="query-rt">
                                <div class="layui-inline">
                                    <button class="layui-btn icon-btn color-green" lay-filter="formSubSearchLog"
                                            lay-submit>查询
                                    </button>
                                    <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 表格 -->
            <table class="layui-table" id="productionAsPlannedTable" lay-filter="productionAsPlannedTable"></table>
        </div>
    </div>
</div>
<style>
    .left-btn{
        flex: 1;
        text-align: left;
    }
    .flex-between{
        width: calc(100% - 40px);
        display: flex;
        justify-content: space-between;
    }
    .productionAsPlannedAddForm .layui-form-item .layui-input-inline{
        width: 290px;
    }
    .productionAsPlannedAddForm .w-auto{
        width: 100px !important;
    }
    .selectProductDetail .layui-table-cell {
        height: auto;
    }
</style>
<!-- 表格操作列 -->
<script type="text/html" id="productionAsPlannedTableBar">
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="rowProduct">排产工单</a>
</script>

<!--在产工单信息-->
<script id="inProductAsWorkOrderTemplate" type="text/html">
    <form lay-filter="inProductAsWorkOrderForm" class="layui-form model-form form-scroll">
        <div class="open-details-box pd-20">
            <div class="work-info" style="padding-top: 25px;">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">工单编号：</label>
                        <div class="layui-input-inline">
                            <input name="workOrderCode" class="layui-input br0" type="text" readonly="readonly"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">所属计划：</label>
                        <div class="layui-input-inline">
                            <input name="planCode" class="layui-input br0" type="text" readonly="readonly"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">交货时间：</label>
                        <div class="layui-input-inline">
                            <input name="deliveryTime" class="layui-input br0" type="text" readonly="readonly"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">订单录入人：</label>
                        <div class="layui-input-inline">
                            <input name="keyboarder" class="layui-input br0" type="text" readonly="readonly"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">询价审核人：</label>
                        <div class="layui-input-inline">
                            <input name="enquiryAuditPerson" class="layui-input br0" type="text" readonly="readonly"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">报价截止时间：</label>
                        <div class="layui-input-inline">
                            <input name="expirationDate" class="layui-input br0" type="text" readonly="readonly"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item table-bor">
                <div class="layui-form-item" style="margin-bottom: 0;">
                    <div class="open-details-title">工序排产明细</div>
                </div>
                <table class="layui-table" id="inProductSkuTable"
                       lay-filter="inProductSkuTable"></table>
            </div>
            <div class="layui-form-item table-bor">
                <table class="layui-table" id="inProductDeviceTable"
                       lay-filter="inProductDeviceTable"></table>
            </div>
            <div class="layui-form-item table-bor">
                <div class="layui-form-item" style="margin-bottom: 0;">
                    <div class="open-details-title">工序关联物料明细</div>
                </div>
                <table class="layui-table" id="inProductMaterialTable"
                       lay-filter="inProductMaterialTable"></table>
            </div>
        </div>
        <div class="layui-form-item text-right pd-20">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>

<!--表格操作按钮-->
<script type="text/html" id="deviceWorkOrderTableBar">
    <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
    {{# if(d.status=="toactivate"){  }}
    <a class="layui-btn layui-btn-xs" lay-event="activate">激活</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="close">关闭</a>
    {{# }else if(d.status =="inproduction"){ }}
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="pause">暂停</a>
    {{# }else if(d.status =="termination"){ }}
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="activate">激活</a>
    {{# } }}
    <a class="layui-btn layui-btn-xs" lay-event="up">上移</a>
    <a class="layui-btn layui-btn-xs" lay-event="down">下移</a>
</script>

<!--排产工单-->
<script id="rowProductWorkOrderTemplate" type="text/html">
    <div class="layui-form open-form">
        <div class="open-model">
            <div class="open-auto">
                <div class="lay-header" style="padding-top: 25px;">
                    <div class="layui-form-item" style="margin-bottom: -10px">
                        <div class="lay-query-box">
                            <div class="query-lt">
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">工单编号：</label>
                                    <div class="layui-input-inline">
                                        <input name="code" class="layui-input" type="text" placeholder="工单编号"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">计划编号：</label>
                                    <div class="layui-input-inline">
                                        <input name="planCode" class="layui-input" type="text" placeholder="计划编号"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">物料名称：</label>
                                    <div class="layui-input-inline">
                                        <input name="skuName" class="layui-input" type="text" placeholder="物料名称"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">物料编码：</label>
                                    <div class="layui-input-inline">
                                        <input name="skuCode" class="layui-input" type="text" placeholder="物料编码"/>
                                    </div>
                                </div>
                                <!--状态:toactivate(0,待激活);inproduction(1,生产中);accomplish(2,完成);termination(3,终止完成)-->
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">工单状态：</label>
                                    <div class="layui-input-inline">
                                        <select name="status">
                                            <option value="">工单状态</option>
                                            <option value="toactivate">待激活</option>
                                            <option value="inproduction">生产中</option>
                                            <option value="accomplish">完成</option>
                                            <option value="termination">终止完成</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="query-rt">
                                <div class="layui-inline">

                                    <button class="layui-btn icon-btn color-green" lay-filter="deviceWorkOrderFormSubSearchLog"
                                            lay-submit>查询
                                    </button>
                                    <button class="layui-btn icon-btn color-white" lay-filter="deviceWorkOrderResets"
                                            lay-submit>重置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <table class="layui-table" id="deviceWorkOrderTable"
                           lay-filter="deviceWorkOrderTable"></table>
                </div>
            </div>
            <div class="layui-form-item text-right pd-20">
                <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            </div>
        </div>
    </div>
</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var admin = layui.admin;
        var upload = layui.upload;

        // 渲染表格
        var insTb = table.render({
            elem: '#productionAsPlannedTable',
            url: config.base + 'production/productionPlan/admin/productionAsPlanned/list',
            page: true,
            cellMinWidth: 100,
            cols: [[
                {type: 'numbers', title: '序号', align: 'center'}
                ,{field: 'code', title: '生产计划', align: 'center'}
                ,{field: 'customerSkuName', title: '物料名称', align: 'center'}
                ,{field: 'customerSkuCode', title: '物料编码', align: 'center'}
                ,{field: 'productTypeName', title: '所属系列', align: 'center'}
                ,{field: 'productionQuantity', title: '计划数量', align: 'center'}
                ,{field: 'finishQuantity', title: '已经完成', align: 'center'}
                ,{field: 'workstationQuantity', title: '排产工站数', align: 'center'}
                ,{field: 'statusDesc', title: '计划状态', align: 'center'}
                ,{field: 'createTime', title: '预计完工时间', align: 'center'}
                ,{align: 'center', toolbar: '#productionAsPlannedTableBar', title: '操作', width: 200}
            ]],
        });

        //监听排序
        table.on('sort(productionAsPlannedTable)', function(obj){
            table.reload('productionAsPlannedTable', {
                initSort: obj
                ,where: {
                    sort: obj.field
                    ,order: obj.type
                }
            });
        });

        // 搜索
        form.on('submit(formSubSearchLog)', function (data) {
            insTb.reload({where: data.field,page: {curr: 1}},'data');
        });

        // 重置搜索
        form.on('submit(resets)', function (data) {
            $(".lay-header").find('select').val("");
            $(".lay-header").find('input').val("");
            var field = data.field;
            for (let key in field) {
                field[key] = ''
            }
            insTb.reload({where: field, page: {curr: 1}}, 'data');
            return false
        });

        form.render('select');

        // 工具条点击事件
        table.on('tool(productionAsPlannedTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'rowProduct') { // 排产工单
                rowProductWorkOrderModel(data);
            }
        });

        // 在产工单信息
        function inProductWorkOrderModel(params) {
            admin.open({
                type: 1,
                area: ['78%', '810px'],
                offset: '65px',
                title: '设备排产工单信息',
                content: $('#inProductAsWorkOrderTemplate').html(),
                success: function () {
                    let workerInfoData = {};
                    // 获取工单详情
                    admin.req('production/productionPlan/admin/productionPlan/getWorkOrderInfo', params, function (res) {
                        if (res.code == 200) {
                            workerInfoData = res.data;
                            form.val('inProductAsWorkOrderForm', workerInfoData);
                            $("input[name='workOrderCode']").val(workerInfoData.planDetail[0].workOrderCode)
                            $("input[name='planCode']").val(workerInfoData.planDetail[0].code)
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }, 'GET', false);

                    // 计划明细
                    var inProductSkuTable = table.render({
                        elem: '#inProductSkuTable',
                        data: workerInfoData.planDetail,
                        cellMinWidth: 120,
                        cols: [[
                            {field: 'productTypeName', title: '物料类型', align: 'center'}
                            , {field: 'customerSkuCode', title: '客户物料编号', align: 'center'}
                            , {field: 'customerSkuName', title: '客户物料名称', align: 'center'}
                            , {field: 'customerSkuSpec', title: '客户规格码', align: 'center'}
                            , {field: 'unitName', title: '单位', align: 'center'}
                            , {field: 'demandQuantity', title: '需求数量', align: 'center'}
                            , {field: 'outputQuantity', title: '排产数量', align: 'center'}
                            , {field: 'workstationQuantity', title: '排产工站数', align: 'center'}
                            , {field: 'customerName', title: '客户信息', align: 'center'}
                            , {field: 'statusDesc', title: '状态', align: 'center'}
                        ]],
                    });

                    // 工单明细
                    var inProductDeviceTable = table.render({
                        elem: '#inProductDeviceTable',
                        data: workerInfoData.workOrderDetail,
                        cellMinWidth: 120,
                        cols: [[
                            {field: 'deviceCode', title: '设备编码', align: 'center'}
                            , {field: 'deviceModel', title: '设备型号', align: 'center'}
                            , {field: 'deviceYield', title: '机台平均合格率', align: 'center'}
                            , {field: 'outputQuantity', title: '排产数量', align: 'center'}
                            , {field: 'productionQuantity', title: '计划生产数', align: 'center'}
                            , {field: 'prepositionTime', title: '前置工单结束时间', align: 'center'}
                            , {field: 'workOrderQuantity', title: '前置工单数', align: 'center'}
                            , {field: 'predictStartTime', title: '预计开工时间', align: 'center'}
                            , {field: 'predictFinishTime', title: '预计完工时间', align: 'center'}
                        ]],
                    });

                    // 关联物料明细
                    var inProductMaterialTable = table.render({
                        elem: '#inProductMaterialTable',
                        data: workerInfoData.materialDetail,
                        cellMinWidth: 120,
                        cols: [[
                            {type: 'numbers', width: 50, title: '序号'}
                            , {field: 'materialSkuCode', title: '物料编号', align: 'center'}
                            , {field: 'materialSkuName', title: '物料名称', align: 'center'}
                            , {field: 'materialSkuSpec', title: '物料规格码', align: 'center'}
                            , {field: 'unitName', title: '计量单位', align: 'center'}
                            , {field: 'fixationDosage', title: '是否固定用量', align: 'center'}
                            , {field: 'dosage', title: '用量', align: 'center'}
                        ]],
                    });
                }
            });
        }

        // 排产工单详情
        function rowProductWorkOrderModel(data) {
            admin.open({
                type: 1,
                area: ['82%', '90%'],
                title: '生产开工单列表',
                content: $('#rowProductWorkOrderTemplate').html(),
                success: function () {
                    form.render("select");
                    var deviceWorkOrderTable = table.render({
                        elem: '#deviceWorkOrderTable',
                        url: config.base + 'production/productionPlan/admin/productionPlan/getDeviceWorkOrderPageList?planCode=' + data.code,
                        page: true,
                        cellMinWidth: 100,
                        cols: [[
                            {type: 'numbers', title: '序号'}
                            , {field: 'code', title: '工单编码', align: 'center'}
                            , {field: 'processName', title: '所属工序', align: 'center'}
                            , {field: 'planCode', title: '所属生产计划', align: 'center'}
                            , {field: 'workOrderQualityDesc', title: '工单性质', align: 'center'}
                            , {field: 'skuName', title: '物料名称', align: 'center'}
                            , {field: 'skuCode', title: '物料编码', align: 'center'}
                            , {field: 'productTypeName', title: '所属系列', align: 'center'}
                            , {field: 'productionQuantity', title: '计划数量', align: 'center'}
                            , {field: 'outputQuantity', title: '排产数量', align: 'center'}
                            , {field: 'predictFinishTime', title: '预计完工时间', align: 'center'}
                            , {field: 'statusDesc', title: '状态', align: 'center'}
                            , {field: 'no', title: '排序', align: 'center'}
                            , {align: 'center', toolbar: '#deviceWorkOrderTableBar', title: '操作', width: 300}
                        ]],
                    });

                    form.on('submit(deviceWorkOrderFormSubSearchLog)', function (data) {
                        deviceWorkOrderTable.reload({where: data.field, page: {curr: 1}}, 'data');
                        //return false;
                    });
                    // 工具条点击事件
                    table.on('tool(deviceWorkOrderTable)', function (obj) {
                        var data = obj.data;
                        if (obj.event === 'activate') { //激活
                            operationWorkOrder(data.id, 0, '确定要激活吗？');
                        } else if (obj.event === 'pause') { // 暂停
                            operationWorkOrder(data.id, 1, '确定要暂停吗？');
                        } else if (obj.event === 'close') { // 关闭
                            operationWorkOrder(data.id, 2, '确定要关闭吗？');
                        } else if (obj.event === 'up') { // 上移
                            moveWorkOrder(data.id, 1);
                        } else if (obj.event === 'down') { // 下移
                            moveWorkOrder(data.id, 2);
                        } else if (obj.event === 'detail') {
                            inProductWorkOrderModel({id: data.id, processId: data.processId, skuCode: data.skuCode})
                        }
                    });

                    // 工单激活、暂停、关闭
                    function operationWorkOrder(id, type, tips) {
                        layer.confirm(tips, {
                            offset: '65px',
                            skin: 'layui-layer-admin'
                        }, function (i) {
                            layer.close(i);
                            layer.load(2);
                            admin.req('production/productionPlan/admin/productionPlan/operationWorkOrder', {
                                id: id,
                                type: type
                            }, function (res) {
                                layer.closeAll('loading');
                                if (res.code == 200) {
                                    layer.msg(res.msg, {icon: 1});
                                    table.reload('deviceWorkOrderTable');
                                } else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }, 'PUT');
                        });
                    }

                    // 上移下移
                    function moveWorkOrder(id, type) {
                        layer.load(2);
                        admin.req('production/productionPlan/admin/productionPlan/moveWorkOrder', {
                            id: id,
                            operaType: type
                        }, function (res) {
                            layer.closeAll('loading');
                            if (res.code == 200) {
                                layer.msg(res.msg, {icon: 1});
                                table.reload('deviceWorkOrderTable');
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, 'PUT');
                    }
                }
            });

        }

    });
</script>